<template>
  <div class="boxs">
    <div class="f2">
      <!-- 身份证正反面 -->
      <div class="license" style="margin-top: 35px">
        <div style="display: flex; margin-left: -0.1563rem">
          <span class="bbb"><span style="color: #f00">*</span> 票据正反面</span>
          <!-- 正面 -->
          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-front"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeFront"
            :http-request="uploadFileFront"
            ref="pictureUpload1"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove1(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!-- 反面 -->

          <!-- 图片上传 -->
          <el-upload
            action="#"
            class="permit el-upload--picture-card permit-reverse"
            list-type="picture-card"
            :auto-upload="false"
            accept="image/png,image/jpg,image/JPG,image/PNG,image/jpeg"
            :on-change="handleChangeReverse"
            :http-request="uploadFileReverse"
            ref="pictureUpload2"
          >
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove2(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!-- --------------------------------------------------- -->
          <div class="license-right card-right">
            <div>
              <p>说明：</p>
              <p>1.确保商票图像完整清晰；</p>
              <p>2.上传文件大小不超过5M；</p>
              <p>3.仅支持bmp、jpeg、png、jpg格式文件。</p>
              <el-popover placement="top-start" trigger="hover">
                <div v-viewer>
                  <img
                    style="width: 45px; height: 45px"
                    src="http://operate.thunlink.cn/protocol/image/u185.png"
                    alt=""
                  />
                  <img
                    style="width: 45px; height: 45px; margin-left: 10px"
                    src="http://operate.thunlink.cn/protocol/image/u186.png"
                    alt=""
                  />
                </div>
                <p slot="reference" class="examine">查看示例</p>
              </el-popover>
            </div>
          </div>
        </div>
      </div>
      <ul>
        <li>
          <el-form ref="ruleForm1" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="票据号码" prop="a">
              <el-input type="string" v-model="form.a" />
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm2" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="票面金额" prop="b">
              <el-input
                @blur="costChangeB"
                @focus="
                  () => {
                    this.form.b = remoney(this.form.b)
                  }
                "
                @input="limitInput($event, 'b')"
                v-model="form.b"
                placeholder=""
              ></el-input>
              <p
                style="
                  position: absolute;
                  right: 0.1042rem;
                  top: 0px;
                  z-index: 99;
                  font-size: 0.0938rem;
                  color: #3f6ef2;
                "
              >
                元
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="ruleForm3" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="承兑人名称" prop="c">
              <el-input v-model="form.c" placeholder=""></el-input>
            </el-form-item>
          </el-form>
          <el-form
            class="aaaaa"
            ref="ruleForm4"
            :model="form"
            label-width="1.0417rem"
            :rules="rules"
          >
            <el-form-item label="票据到期日" prop="d">
              <el-date-picker
                :clearable="false"
                v-model="form.d"
                type="date"
                placeholder=""
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <p
                style="
                  position: absolute;
                  right: 0.1042rem;
                  top: 0px;
                  z-index: 99;
                  font-size: 0.0833rem;
                "
              >
                <img style="width: 0.1146rem" src="@/assets/shangpiao/日历.png" alt="" />
              </p>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="ruleForm5" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="承兑人银行账号" prop="e">
              <el-input v-model="form.e" placeholder=""></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm6" :model="form" label-width="1.0417rem" :rules="rules">
            <el-form-item label="承兑人开户行行号" prop="f">
              <el-input v-model="form.f" placeholder=""></el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>
    </div>
    <!-- 发票信息 -->
    <div class="f3">
      <div class="notNull">
        <!-- 发票信息表格数据 -->
        <!-- 1.新增按钮 -->
        <div class="newly">
          <h4>发票信息</h4>
          <h5 @click="newlyInvoiceBtn()">新增</h5>
        </div>
        <!-- 空状态 -->
        <div v-if="!invoiceData" class="null">
          <img src="@/assets/shangpiao/组162.png" alt="" />
          <p>暂无数据记录</p>
        </div>
        <!-- 2.表格 -->
        <el-table
          v-else
          :data="invoiceData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#F1F5FF',
            color: '#4D4D4D'
          }"
        >
          <!-- <el-table-column type="selection" min-width="6%" align="center">
          </el-table-column> -->
          <el-table-column prop="number" label="序号" min-width="2%" align="center">
          </el-table-column>
          <el-table-column prop="invCode" label="发票代码" min-width="6%" align="center">
          </el-table-column>
          <el-table-column prop="invNo" label="发票编号" min-width="6%" align="center">
          </el-table-column>
          <el-table-column prop="invAmount" label="发票金额 (元) " min-width="6%" align="center">
            <template slot-scope="scope">{{ scope.row.invAmount | getArea }}</template>
          </el-table-column>
          <el-table-column prop="currency" label="币种" min-width="4%" align="center">
          </el-table-column>
          <el-table-column prop="invDate" label="开票日期" min-width="6%" align="center">
          </el-table-column>
          <el-table-column prop="contractno" label="合同编号" min-width="6%" align="center">
          </el-table-column>
          <el-table-column label="发票详情" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="checkContract(scope.$index, invoiceData)"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="updateInvoice(scope.$index, invoiceData)"
                type="text"
                size="small"
              >
                编辑
              </span>
              <span
                class="span del"
                @click="delInvoice(scope.$index, invoiceData)"
                type="text"
                size="small"
              >
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 3.说明文字 -->
        <div class="explain">
          <div class="explain-left">
            <span>说明：</span>
          </div>
          <div class="explain-right">
            <p>
              （1）请逐一准确填写上述信息，每行所填写信息应与上传文件逐一对应，确保发票已加盖专用章，图像完整清晰
              ；
            </p>
            <p>（2）发票有“详见销货清单”字样时，请将销货单与发票打包后一并上传 ；</p>
            <p>
              （3）一张发票对应多份合同时，合同编码栏填写多份合同对应编码，不同编码中间用“，”分隔。
            </p>
          </div>
        </div>

        <!-- 合同信息表格数据 -->
        <!-- 1.新增按钮 -->
        <div class="newly">
          <h4>合同信息</h4>
          <h5 @click="newlyContractBtn()">新增</h5>
        </div>
        <!-- 空状态 -->
        <div v-if="!contractData" class="null">
          <img src="@/assets/shangpiao/组162.png" alt="" />
          <p>暂无数据记录</p>
        </div>
        <!-- 2.表格 -->
        <el-table
          v-else
          :data="contractData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#F1F5FF',
            color: '#4D4D4D'
          }"
        >
          <el-table-column prop="number" label="序号" min-width="2%" align="center">
          </el-table-column>
          <el-table-column prop="conNo" label="合同编号" min-width="6%" align="center">
          </el-table-column>
          <el-table-column prop="conName" label="合同名称" min-width="6%" align="center">
          </el-table-column>
          <el-table-column prop="conAmount" label="合同金额 (元) " min-width="6%" align="center">
            <template slot-scope="scope">{{ scope.row.conAmount | getArea }}</template>
          </el-table-column>
          <el-table-column prop="currency" label="币种" min-width="4%" align="center">
          </el-table-column>

          <el-table-column label="合同详情" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="checkContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="updateContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                编辑
              </span>
              <span
                class="span del"
                @click="delContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 3.说明文字 -->
        <div class="explain">
          <div class="explain-left">
            <span>说明：</span>
          </div>
          <div class="explain-right">
            <p>
              （1）请逐一填写合同信息，如为框架合同，合同金额处填写融资发票合计金额，合同总金额应大于等于发票金额
              ；
            </p>
            <p>
              （2）请确保合同印章清晰，图像清晰完整，合同附件与附件清单打包后一并上传，并加盖骑缝章；
            </p>
            <p>（3）框架合同，请将与融资发票对应的订单或发货单等文件与合同打包后一并上传。</p>
          </div>
        </div>
      </div>
      <!-- 服务协议 -->
      <div class="agreement">
        <img
          @click="
            submitBtn('ruleForm1', 'ruleForm2', 'ruleForm3', 'ruleForm4', 'ruleForm5', 'ruleForm6')
          "
          :src="require(`@/assets/shangpiao/组${radio ? '38' : '39'}.png`)"
          alt=""
        />
        <span> 阅读并同意 </span>
        <!-- href="http://operate.thunlink.cn/protocol/4 企业授权协议-商驿/4 企业授权协议-商驿.html"
          target="_back" -->
        <a
          @click="
            submitBtn('ruleForm1', 'ruleForm2', 'ruleForm3', 'ruleForm4', 'ruleForm5', 'ruleForm6')
          "
          >《企业授权协议》、</a
        >
        <!-- href="http://operate.thunlink.cn/protocol/10 技术服务协议-商票驿/10 技术服务协议-商票驿.html"
          target="_back" -->
        <a
          @click="
            submitBtn('ruleForm1', 'ruleForm2', 'ruleForm3', 'ruleForm4', 'ruleForm5', 'ruleForm6')
          "
          >《技术服务协议》</a
        >
      </div>
      <!-- 上一步/保存/提交 按钮 -->
      <div class="submit">
        <div class="btn btn1" @click="goLast()">上一步</div>
        <!-- <div class="btn btn2" @click="save()">保存</div> -->
        <el-tooltip placement="top" v-if="!btn">
          <div slot="content">请勾选授权协议<br />确认填写的信息是否完整</div>
          <button
            class="btn btn3"
            v-bind:class="{
              active: btn & radio,
              actives: submitMessage == '提交中'
            }"
            @click="submit()"
          >
            {{ submitMessage }}
          </button>
        </el-tooltip>
        <button
          v-else
          class="btn btn3"
          v-bind:class="{
            active: btn & radio,
            actives: submitMessage == '提交中'
          }"
          @click="submit()"
        >
          {{ submitMessage }}
        </button>
      </div>
    </div>
    <!-- 弹框部分 -->
    <!-- 新增发票弹框开始 -->
    <el-dialog
      class="success"
      :closeOnClickModal="false"
      title="上传发票信息"
      :visible.sync="newlyInvoiceVisible"
      :before-close="handleClose"
      width=""
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-centerss">
        <ul>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item prop="invCode" label="发票代码">
                <el-input v-model="formInvoice.invCode" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="发票编号" prop="invNo">
                <el-input v-model="formInvoice.invNo" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="发票金额 (元) " prop="invAmount">
                <el-input
                  @blur="costChangeInvAmount"
                  @focus="
                    () => {
                      this.formInvoice.invAmount = remoney(this.formInvoice.invAmount)
                    }
                  "
                  @input="limitInput($event, 'conAmount')"
                  v-model="formInvoice.invAmount"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input disabled v-model="formInvoice.currency" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="开票日期" prop="invDate">
                <el-date-picker
                  :clearable="false"
                  v-model="formInvoice.invDate"
                  type="date"
                  placeholder=""
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="合同编码" prop="contractno">
                <el-input v-model="formInvoice.contractno" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="100px">
              <el-form-item label="发票上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  multiple="multiple"
                >
                  <span class="file" slot="trigger" size="small" type="primary" @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffInvoice()">取 消</button>
        <button
          :disabled="isLock"
          class="dialog-footer-bnt btn2"
          @click="updateCoopeorgInvoice('formInvoiceRef')"
        >
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 新增发票弹框结束 -->
    <!-- 新增合同弹框开始 -->
    <el-dialog
      class="success"
      :closeOnClickModal="false"
      title="新增合同"
      :visible.sync="newlyContractVisible"
      :before-close="handleClose"
      width=""
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-centerss">
        <ul>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同编号" prop="conNo">
                <el-input v-model="formContract.conNo" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同名称" prop="conName">
                <el-input v-model="formContract.conName" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同金额 (元) " prop="conAmount">
                <el-input
                  @blur="costChangeConAmount"
                  @focus="
                    () => {
                      this.formContract.conAmount = remoney(this.formContract.conAmount)
                    }
                  "
                  v-model="formContract.conAmount"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input disabled v-model="formContract.currency" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="100px">
              <el-form-item label="合同上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                  multiple="multiple"
                >
                  <span class="file" slot="trigger" size="small" type="primary" @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffContract()">取 消</button>
        <button :disabled="isLock" class="dialog-footer-bnt btn2" @click="updateCoopeorgContract()">
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 新增合同弹框结束 -->
    <!-- 编辑弹框部分 -->
    <!-- 编辑发票弹框开始 -->
    <el-dialog
      class="success"
      :closeOnClickModal="false"
      title="编辑发票信息"
      :visible.sync="updateInvoiceVisible"
      :before-close="handleClose"
      width=""
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-centerss">
        <ul>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item prop="invCode" label="发票代码">
                <el-input v-model="formInvoice.invCode" placeholder="请输入发票代码"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="发票编号" prop="invCode">
                <el-input v-model="formInvoice.invNo" placeholder="请输入发票编号"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="发票金额 (元) " prop="invAmount">
                <el-input
                  @blur="costChangeInvAmount"
                  @focus="
                    () => {
                      this.formInvoice.invAmount = remoney(this.formInvoice.invAmount)
                    }
                  "
                  @input="limitInput($event, 'conAmount')"
                  v-model="formInvoice.invAmount"
                  placeholder="请输入发票金额"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input
                  disabled
                  v-model="formInvoice.currency"
                  placeholder="请输入币种"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="开票日期" prop="invDate">
                <el-date-picker
                  v-model="formInvoice.invDate"
                  type="date"
                  placeholder="请输入开票日期"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="100px"
            >
              <el-form-item label="合同编码" prop="contractno">
                <el-input v-model="formInvoice.contractno" placeholder="请输入合同编码"></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="100px">
              <el-form-item label="重新上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                  multiple="multiple"
                >
                  <span class="file" slot="trigger" size="small" type="primary" @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffInvoice()">取 消</button>
        <button :disabled="isLock" class="dialog-footer-bnt btn2" @click="updateInvoiceData()">
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 编辑发票弹框结束 -->
    <!-- 编辑合同弹框开始 -->
    <el-dialog
      class="success"
      :closeOnClickModal="false"
      title="编辑合同信息"
      :visible.sync="updateContractVisible"
      :before-close="handleClose"
      width=""
      center
    >
      <!-- 内容区域 -->
      <div class="dialog-centerss">
        <ul>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同编号" prop="conNo">
                <el-input v-model="formContract.conNo" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同名称" prop="conName">
                <el-input v-model="formContract.conName" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="合同金额 (元) " prop="conAmount">
                <el-input
                  @blur="costChangeConAmount"
                  @focus="
                    () => {
                      this.formContract.conAmount = remoney(this.formContract.conAmount)
                    }
                  "
                  @input="limitInput($event, 'conAmount')"
                  v-model="formContract.conAmount"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="100px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input disabled v-model="formContract.currency" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="100px">
              <el-form-item label="重新上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                  multiple="multiple"
                >
                  <span class="file" slot="trigger" size="small" type="primary" @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffContract()">取 消</button>
        <button :disabled="isLock" class="dialog-footer-bnt btn2" @click="updateCoopeorgData()">
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 编辑合同弹框结束 -->
    <!-- 查看票据正反面信息 -->
    <el-dialog title="票据示例" :visible.sync="contractCardbackVisible" width="35%" center>
      <!-- 内容区域 -->
      <div
        v-viewer
        v-if="1 > 0"
        style="text-align: center; width: 300px; height: 300px; z-index: 998"
        class="dialog-centers"
        @click="contractCardbackVisible = false"
      >
        <img
          style="width: 100%; height: 100%; margin-bottom: 15px; z-index: 998"
          src="../../../../public/img/u185.png"
          alt=""
        />
        <img
          style="width: 100%; height: 100%; z-index: 998"
          src="../../../../public/img/u186.png"
          alt=""
        />
        <p style="margin-top: 20px">点击图片可查看大图</p>
      </div>
      <div v-else style="text-align: center; margin-bottom: 30px" class="dialog-centers">
        <h4>暂无详细资料</h4>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="contractCardbackVisible = false">
          取 消
        </button>
        <button class="dialog-footer-bnt btn2" @click="contractCardbackVisible = false">
          确 定
        </button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <!-- 弹窗 -->
    <!--签署协议弹窗开始 -->
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title=""
      :visible.sync="showAgreementVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center" v-loading="loading">
        <template v-if="list">
          <el-tabs v-model="activeName">
            <el-tab-pane v-for="item in list" :key="item.url" :label="item.name" :name="item.names">
              <div class="first">
                <iframe
                  style="border: none"
                  width="100%"
                  height="100%"
                  v-bind:src="item.url"
                ></iframe>
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="技术服务协议" name="second">
              <div class="first">
                <iframe
                  style="border: none"
                  width="100%"
                  height="100%"
                  v-bind:src="JSFWreportUrl"
                ></iframe></div
            ></el-tab-pane> -->
          </el-tabs>
        </template>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          v-if="contractStatuss"
          :disabled="isLock"
          class="dialog-footer-bnt btn2"
          @click="aaaa"
        >
          确定
        </button>
        <button v-else :disabled="isLock" class="dialog-footer-bnt btn2" @click="sign">
          去签署
        </button>
      </div>
    </el-dialog>
    <!-- 签署协议弹窗结束 -->
    <!--签署协议提示开始 -->
    <el-dialog
      class="hint"
      :closeOnClickModal="false"
      title="合同签署"
      :visible.sync="hintVisible"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center-hint">
        <p>
          签署短信已发送至经办人手机{{ operatetel | getPhone }}、法定代表人手机{{
            officertel | getPhone
          }}，请点击短信签署链接完成签署操作。
        </p>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          style="background: #fff; color: #3f6ef2"
          class="dialog-footer-bnt btn2"
          @click="aaaa"
        >
          确定
        </button>
        <button
          class="dialog-footer-bnt btn2"
          @click="submit"
          v-bind:class="{ actives: submitMessage == '提交中' }"
        >
          {{ submitMessage }}
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  base,
  Contracts,
  createContractReview,
  Contract,
  getInvoice,
  delInvoice,
  updateInvoice,
  getContract,
  delContract,
  updateContract,
  getFilePath,
  updateapplyid
} from '@/utils'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      submitMessage: '提交',
      fpid: [],
      htid: [],
      contractStatuss: true, //签署状态
      isLock: false,
      procedureid: '', //产品Id
      applyName: '', //申请文件表格中文件名称
      newlyInvoiceVisible: false, // 新增发票弹框状态变量
      updateInvoiceVisible: false, //编辑发票弹框状态变量
      newlyContractVisible: false, //新增合同弹框状态变量
      updateContractVisible: false, //编辑合同弹框状态变量
      fileList: [],
      // 不支持多选
      multiple: false,
      formData: '',
      //发票信息表单数据对象
      formInvoice: {
        invCode: '', //发票代码
        invNo: '', //发票编号
        invAmount: '', //金额
        currency: '人民币', //币种
        invDate: '', //开票日期
        contractno: '', //合同编码
        id: '' //每个列表的唯一id
      },
      //发票信息表单数据对象
      formInvoices: {
        invAmount: ''
      },
      //合同信息表单数据对象
      formContract: {
        conNo: '', //合同编号
        conName: '', //合同名称
        conAmount: '', //合同金额
        currency: '人民币', //币种
        id: '' //id
      },
      //合同信息表单数据对象
      formContracts: {
        conAmount: ''
      },
      // 发票表格数据
      invoiceData: null,
      // 合同表格数据
      contractData: null,
      // 表单验证
      // 发票弹框表单验证
      formInvoiceRules: {
        invCode: [{ required: true, message: ' ', trigger: 'blur' }],
        invNo: [{ required: true, message: ' ', trigger: 'blur' }],
        invAmount: [{ required: true, message: ' ', trigger: 'blur' }],
        currency: [{ required: true, message: ' ', trigger: 'blur' }],
        invDate: [{ required: true, message: ' ', trigger: 'change' }],
        contractno: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      // 合同弹框表单验证
      formContractRules: {
        conNo: [{ required: true, message: ' ', trigger: 'blur' }],
        conName: [{ required: true, message: ' ', trigger: 'blur' }],
        conAmount: [{ required: true, message: ' ', trigger: 'blur' }],
        currency: [{ required: true, message: ' ', trigger: 'blur' }]
      },

      isLock: false,
      QYSQreportUrl: '',
      JSFWreportUrl: '',
      activeName: 'first', //标签页默认
      loading: false,
      dialogImageUrl: '',
      flowId: '',
      dialogVisible: false,
      disabled: false,
      imgUrl: '',
      list: null,
      dialogVisible: false,
      dialogUrl: '',
      producttype: '', //产品类型
      productname: '',
      productid: '',
      applyid: '', //路由地址中获取的关联ID
      contractCardbackVisible: false,
      showAgreementVisible: false, //协议弹框:
      hintVisible: false,
      radio: false, //企业授权服务状态变量
      btn: false,
      fileListFront: [],
      fileListReverse: [],
      officertel: '', //法人手机号
      operatetel: '', //经办人手机号
      base: '',
      form: {
        a: '',
        b: '',
        c: '',
        d: '',
        e: '',
        f: '',
        acceptorAccountBank: '', //承兑人开户行名称
        issueDate: '', //出票日期
        issuerName: '', //出票人名称
        acceptanceDate: '', //承兑日期
        draftStatus: '' //票据状态
      },
      // 用户填写资料表格
      addform: {
        b: ''
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: ' ', trigger: 'blur' }],
        b: [{ required: true, message: ' ', trigger: 'blur' }],
        c: [{ required: true, message: ' ', trigger: 'blur' }],
        d: [{ required: true, message: ' ', trigger: 'blur' }],
        e: [{ required: true, message: ' ', trigger: 'blur' }],
        f: [{ required: true, message: ' ', trigger: 'blur' }]
      },
      // 合同签署数据
      contract: {
        applyid: '',
        entname: '',
        FRaccountid: '',
        inputdate: '',
        JBRaccountid: '',
        licenseno: '',
        mainindname: '',
        officer: '',
        officertel: '',
        ORGaccountid: '',
        productcode: '',
        radio: '',
        ticketadder: '',
        ticketbank: '',
        ticketbankno: '',
        tickethead: '',
        ticketno: '',
        tickettel: '',
        acceptor: '', //承兑人
        step: 'apply'
      }
    }
  },
  // 过滤器
  filters: {
    // 手机号脱敏
    getPhone: function (value) {
      if (!value) return value
      value = value.replace(/(\d{3})\d*(\d{4})/, '$1****$2')
      return value
    },
    getArea: function (value) {
      if (!value) return '-'
      let num = Number(value)
      if (isNaN(num)) return '-'
      value = num.toFixed(2)
      // 获取整数部分
      const intPart = Math.trunc(value)
      // 整数部分处理，增加,
      const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
      // 预定义小数部分
      let floatPart = '.00'
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split('.')
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString() // 取得小数部分
        return intPartFormat + '.' + floatPart
      }
      return intPartFormat + floatPart
    },
    getDate: function (value) {
      if (!value) return value
      let date = value.split(' ')[0]
      return date
    }
  },
  // 监听器
  watch: {
    fileListFront() {
      if (this.fileListFront.length == 0) return
      this.submitBtns()
      let formData = new FormData()
      formData.append('file', this.fileListFront)
      let token = sessionStorage.getItem('token')
      let url = this.base + '/api/BusinessSPs/ocr'
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(res => {
          if (res.data.code == 100) {
            let bankCard = res.data.data.ticketdata
            this.form.a = bankCard.draftNumber
            this.form.c = bankCard.acceptorName
            this.form.d = this.formatDate(bankCard.validToDate)
            this.form.e = bankCard.acceptorAccountNumber
            this.form.f = bankCard.acceptorBankNumber
            this.form.acceptorAccountBank = bankCard.acceptorAccountBank
            this.form.issueDate = bankCard.issueDate
            this.form.issuerName = bankCard.issuerName
            this.form.acceptanceDate = bankCard.acceptanceDate
            this.form.draftStatus = bankCard.draftStatus
            // this.bankCard.serialno = res.data.data.fileId;
            if (parseInt(Number(bankCard.totalAmount), 10) != Number(bankCard.totalAmount)) {
              this.form.b = Number(bankCard.totalAmount).toLocaleString()
            } else {
              this.form.b = Number(bankCard.totalAmount).toLocaleString() + '.00'
            }
            this.addform.b = bankCard.totalAmount
            this.submitBtns()
          } else {
            this.$Message.error('OCR识别失败')
          }
        })
    },
    fileListReverse() {
      this.submitBtns()
    },
    invoiceData() {
      this.submitBtns()
    },
    contractData() {
      this.submitBtns()
    }
  },
  // 计算属性
  computed: {
    ...mapState(['shangPiaoApplyParameter'])
  },
  // 生命周期函数
  mounted() {
    // 获取地址栏中参数
    // this.applyid = localStorage.getItem("applyid");
    // this.contract.applyid = this.shangPiaoApplyParameter.applyid
    this.producttype = '91'
    this.productname = localStorage.getItem('productname')
    this.productid = localStorage.getItem('id')
    this.contract.productcode = this.shangPiaoApplyParameter.productcode
    this.base = base
    // // 获取发票列表
    // this.getInvoice()
    // // 获取合同列表
    // this.getContract()
    this.random()
  },
  methods: {
    // 格式化时间
    formatDate(date) {
      if (date.split('-').length != 1) return date
      let year = date.slice(0, 4)
      let month = date.slice(4, 6)
      let d = date.slice(6, 8)
      return year + '-' + month + '-' + d
    },
    // 生成随机数
    random() {
      // 定义存放生成随机数的数组
      var array = new Array()
      // 循环N次生成随机数
      for (var i = 0; ; i++) {
        // 只生成10个随机数
        if (array.length < 10) {
          generateRandom(10)
        } else {
          break
        }
      }
      // 循环遍历随机数数组
      let num = ''
      for (var i = 0; i < array.length; i++) {
        num += array[i]
      }
      // 生成随机数的方法
      function generateRandom(count) {
        var rand = parseInt(Math.random() * count)
        for (var i = 0; i < array.length; i++) {
          if (array[i] == rand) {
            return false
          }
        }
        array.push(rand)
      }
      this.applyid = num
    },
    del: function () {
      this.imgUrl = ''
      this.dialogUrl = ''
    },
    // 点击确认按钮
    async submit() {
      if (this.submitMessage == '提交中') return
      if (!this.btn) return
      if (
        (this.form.a != '') &
        (this.form.b != '') &
        (this.form.c != '') &
        (this.form.d != '') &
        (this.form.e != '') &
        (this.form.f != '') &
        this.radio &
        (this.fileListFront.length != 0) &
        (this.fileListReverse.length != 0) &
        (this.invoiceData != null) &
        (this.contractData != null)
      ) {
        if (
          !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListFront.name) ||
          !/\.(jpg|jpeg|png|JPG|PNG)$/.test(this.fileListReverse.name)
        ) {
          this.$Message.warning('暂不支持上传该格式文件')
          return
        }
        // let result = await ContractContract(this.flowId);
        // if (result.data.flowStatus != 2)
        //   return this.$Message.error("合同签署未完成");
        this.submitMessage = '提交中'
        let formData = new FormData()
        formData.append('file', this.fileListFront)
        formData.append('files', this.fileListReverse)
        let token = sessionStorage.getItem('token')
        let {
          a,
          c,
          d,
          e,
          f,
          acceptorAccountBank,
          issueDate,
          issuerName,
          acceptanceDate,
          draftStatus
        } = this.form
        let { b } = this.addform
        let url =
          this.base +
          `/api/BusinessSPs/findaddsp?billnumber=${a}&faceamount=${b}&acceptorname=${c}&billdate=${d}&acceptorbank=${f}&acceptorbanking=${e}&itemno=Front&itemnos=Fronts&objecttype=piaoju&applyid=${this.applyid}&producttype=${this.producttype}&acceptorAccountBank=${acceptorAccountBank}&issuedate=${issueDate}&issuername=${issuerName}&acceptancedate=${acceptanceDate}&draftstatus=${draftStatus}&productcode=${this.contract.productcode}&productname=${this.productname}&productid=${this.productid}`
        this.axios
          .post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
          })
          .then(res => {
            let htid = this.htid.join('@')
            let fpid = this.fpid.join('@')
            if (res.data.msg == 'ok') {
              let applyid = res.data.data.sPticketinfo.applyid
              let url =
                base + `/api/BusinessSPs/updatefpht?applyid=${applyid}&fpid=${fpid}&htid=${htid}`
              let pads = {}
              this.axios
                .post(url, pads, {
                  headers: {
                    'Content-Type': 'multipart/form-data',
                    'x-auth': token
                  }
                })
                .then(datas => {})
              this.$store.commit('updataApplyProductcode', this.contract.productcode)
              updateapplyid(res.data.data.sPticketinfo.applyid, this.flowId)
              this.$router.push('/cyedApplication3')
              this.$Message.success('申请提交成功')
              this.hintVisible = false
              setTimeout(() => {
                this.submitMessage = '提交'
              }, 3000)
            } else {
              this.$Message.error('文件上传失败，请检查文件信息')
              this.submitMessage = '提交'
            }
          })
          .catch(err => {
            this.$Message.error('文件上传失败，请检查文件信息')
            this.submitMessage = '提交'
          })
      } else {
        this.$Message.error('请填写/上传申请信息/文件')
      }
    },
    // 新增发票
    // 点击新增弹出输入框
    newlyInvoiceBtn() {
      this.newlyInvoiceVisible = true
    },
    // 点击取消弹框
    callOffInvoice() {
      this.newlyInvoiceVisible = false
      this.updateInvoiceVisible = false
      this.formInvoice.invCode = ''
      this.formInvoice.invNo = ''
      this.formInvoice.invAmount = ''
      this.formInvoice.invDate = ''
      this.formInvoice.contractno = ''
      this.fileList = []
    },
    // 点击弹框确认按钮,新增发票
    async updateCoopeorgInvoice() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      if (
        (this.formInvoice.invCode != '') &
        (this.formInvoice.invNo != '') &
        (this.formInvoice.invAmount != '') &
        (this.formInvoice.currency != '') &
        (this.formInvoice.invDate != '') &
        (this.formInvoice.contractno != '') &
        (this.fileList.length != 0)
      ) {
        let token = sessionStorage.getItem('token')
        let formData = new FormData()
        formData.append('file', this.fileList[0].raw)
        let { invCode, contractno, currency, invDate, invNo } = this.formInvoice
        let { invAmount } = this.formInvoices
        let url =
          this.base +
          `/api/Invoice/addInvoice?objecttype=invoice&newfilename=${this.formInvoice.invCode}&applyid=${this.applyid}&currency=${currency}&invAmount=${invAmount}&invDate=${invDate}&invCode=${invCode}&contractno=${contractno}&invNo=${invNo}`
        this.axios
          .post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
          })
          .then(res => {
            if (res.data.msg == 'ok') {
              this.$Message.success('新增成功')
              this.formInvoice.invCode = ''
              this.formInvoice.invNo = ''
              this.formInvoice.invAmount = ''
              this.formInvoice.invDate = ''
              this.formInvoice.contractno = ''
              this.fileList = []
              this.getInvoice()
              this.newlyInvoiceVisible = false
              this.fpid.push(res.data.data.tblInvoice1.id)
            } else {
              this.$Message.error('文件上传失败，请检查文件信息')
            }
          })
      } else {
        this.$Message.error('请填写/上传发票信息/文件')
      }
    },
    // 点击删除按钮
    async delInvoice(index, row) {
      let id = row[index].id
      let data = await delInvoice(id)
      if (data.msg == 'ok') {
        this.$Message.success('删除成功')
        this.getInvoice()
      }
      return data
    },
    // 点击编辑按钮弹框
    updateInvoice(index, row) {
      let data = row[index]
      this.updateInvoiceVisible = true
      // 将数据回显在输入框中
      this.formInvoice.invCode = data.invCode
      this.formInvoice.invNo = data.invNo
      this.formInvoice.invAmount = data.invAmount
      this.formInvoice.invDate = data.invDate
      this.formInvoice.contractno = data.contractno
      this.formInvoice.id = data.id
      // 合同金额
      if (data.invAmount) {
        if (parseInt(Number(data.invAmount), 10) != Number(data.invAmount)) {
          this.formInvoice.invAmount = Number(data.invAmount).toLocaleString()
        } else {
          this.formInvoice.invAmount = Number(data.invAmount).toLocaleString() + '.00'
        }
      }
      this.formInvoices.invAmount = data.invAmount
    },
    // 点击编辑弹框确认按钮
    async updateInvoiceData() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      let params = {
        invCode: this.formInvoice.invCode,
        invNo: this.formInvoice.invNo,
        invAmount: this.formInvoices.invAmount,
        currency: this.formInvoice.currency,
        invDate: this.formInvoice.invDate,
        contractno: this.formInvoice.contractno,
        id: this.formInvoice.id
      }
      if (this.fileList.length == 0) {
        if (
          (this.formInvoice.invCode != '') &
          (this.formInvoice.invNo != '') &
          (this.formInvoice.invAmount != '') &
          (this.formInvoice.currency != '') &
          (this.formInvoice.invDate != '') &
          (this.formInvoice.contractno != '')
        ) {
          let data = await updateInvoice(params)
          if (data.msg == 'ok') {
            this.updateInvoiceVisible = false
            this.getInvoice()
            this.$Message.success('编辑成功')
            this.formInvoice.invCode = ''
            this.formInvoice.invNo = ''
            this.formInvoice.invAmount = ''
            this.formInvoice.invDate = ''
            this.formInvoice.contractno = ''
          } else {
            this.$Message.error('修改失败请检查数据')
          }
        } else {
          this.$Message.error('请填写发票信息')
        }
      } else {
        // 上传图片
        let token = sessionStorage.getItem('token')
        let formData = new FormData()
        formData.append('file', this.fileList[0].raw)
        let url =
          this.base +
          `/api/Invoice/updateInvoice?id=${this.formInvoice.id}&currency=${this.formInvoice.currency}&invAmount=${this.formInvoices.invAmount}&invDate=${this.formInvoice.invDate}&invCode=${this.formInvoice.invCode}&contractno=${this.formInvoice.contractno}&invNo=${this.formInvoice.invNo}&objecttype=invoice&newfilename=${this.formInvoice.invCode}`
        this.axios
          .post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
          })
          .then(res => {
            if (res.data.msg == 'ok') {
              this.$Message.success('编辑成功')
              this.formInvoice.invCode = ''
              this.formInvoice.invNo = ''
              this.formInvoice.invAmount = ''
              this.formInvoice.invDate = ''
              this.formInvoice.contractno = ''
              this.fileList = []
              this.getInvoice()
              this.updateInvoiceVisible = false
            } else {
              this.$Message.error('文件上传失败，请检查文件信息')
            }
          })
      }
    },
    // 1.调用接口，获取发票信息列表
    async getInvoice() {
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) return
      let { data } = await getInvoice(this.applyid)
      this.invoiceData = data
      for (let i = 0; i < data.length; i++) {
        this.invoiceData[i].number = i + 1
      }
      if (data.length == 0) {
        this.invoiceData = null
      }
      return data
    },
    // 关闭弹窗
    handleClose() {
      this.applyFileVisible = false
      this.newlyContractVisible = false
      this.updateContractVisible = false
      this.updateInvoiceVisible = false
      this.newlyInvoiceVisible = false
      this.fileList = []
    },
    // 点击文件
    handlePreview(file) {},
    //删除文件
    handleRemove(file, fileList) {},
    // 判断用户上传的·是否为图片
    beforeAvatarUpload(file) {},
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    //自定义上传文件
    uploadFile(file) {
      this.formData.append('file', file.file)
    },
    // 新增合同
    newlyContractBtn() {
      this.newlyContractVisible = true
    },
    // 点击取消弹框
    callOffContract() {
      // this.$Message.warning("取消编辑");
      this.newlyContractVisible = false
      this.updateContractVisible = false
      this.formContract.conNo = ''
      this.formContract.conName = ''
      this.formContract.conAmount = ''
      this.fileList = []
    },
    // 点击弹框确认按钮，新增合同信息
    async updateCoopeorgContract() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      if (
        (this.formContract.conNo != '') &
        (this.formContract.conName != '') &
        (this.formContract.conAmount != '') &
        (this.formContract.currency != '') &
        (this.fileList.length != 0)
      ) {
        let { conNo, conName, currency } = this.formContract
        let { conAmount } = this.formContracts
        let token = sessionStorage.getItem('token')
        let formData = new FormData()
        formData.append('file', this.fileList[0].raw)
        let url =
          this.base +
          `/api/TblContract/addContract?objecttype=contract&newfilename=${conName}&applyid=${this.applyid}&conNo=${conNo}&conName=${conName}&conAmount=${conAmount}&currency=${currency}`
        this.axios
          .post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
          })
          .then(res => {
            if (res.data.msg == 'ok') {
              this.newlyContractVisible = false
              this.$Message.success('新增成功')
              this.getContract()
              this.formContract.conNo = ''
              this.formContract.conName = ''
              this.formContract.conAmount = ''
              this.htid.push(res.data.data.tblContract.id)
              this.fileList = []
            } else {
              this.$Message.error('文件上传失败，请检查文件信息')
            }
          })
          .catch(err => {
            this.$Message.error('上传失败')
            this.fileList = []
          })
      } else {
        this.$Message.error('请填写/上传合同信息/文件')
      }
    },
    // 编辑某项合同信息
    updateContract(index, row) {
      let data = row[index]
      this.updateContractVisible = true
      // 回显数据
      this.formContract.conNo = data.conNo
      this.formContract.conName = data.conName
      this.formContract.currency = data.currency
      this.formContract.id = data.id
      // 合同金额
      if (data.conAmount) {
        if (parseInt(Number(data.conAmount), 10) != Number(data.conAmount)) {
          this.formContract.conAmount = Number(data.conAmount).toLocaleString()
        } else {
          this.formContract.conAmount = Number(data.conAmount).toLocaleString() + '.00'
        }
      }
      this.formContracts.conAmount = data.conAmount
      // ;
    },
    // 点击编辑弹框确认按钮
    async updateCoopeorgData() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      let { conNo, conName, currency } = this.formContract
      let { conAmount } = this.formContracts
      conAmount = conAmount.toString()
      let parameter = {
        conNo: this.formContract.conNo,
        conName: this.formContract.conName,
        currency: this.formContract.currency,
        conAmount: this.formContracts.conAmount,
        id: this.formContract.id
      }
      if (this.fileList.length == 0) {
        if (
          conNo.trim() == '' ||
          conName.trim() == '' ||
          currency.trim() == '' ||
          conAmount.trim() == ''
        )
          return this.$Message.error('请填写发票信息')
        let data = await updateContract(parameter)
        if (data.msg == 'ok') {
          this.fileList = []
          this.updateContractVisible = false
          this.$Message.success('编辑成功')
          this.getContract()
          this.formContract.conNo = ''
          this.formContract.conName = ''
          this.formContract.conAmount = ''
          this.formContract.currency = ''
        }
      } else {
        // 上传图片
        let token = sessionStorage.getItem('token')
        let formData = new FormData()
        formData.append('file', this.fileList[0].raw)
        let url =
          this.base +
          `/api/TblContract/updateContract?objecttype=contract&newfilename=${conName}&id=${this.formContract.id}&currency=${currency}&conName=${conName}&conAmount=${conAmount}&conNo=${conNo}`
        this.axios
          .post(url, formData, {
            headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
          })
          .then(res => {
            if (res.data.msg == 'ok') {
              this.fileList = []
              this.updateContractVisible = false
              this.$Message.success('编辑成功')
              this.getContract()
              this.formContract.conNo = ''
              this.formContract.conName = ''
              this.formContract.conAmount = ''
              this.formContract.currency = ''
            } else {
              this.$Message.error('文件上传失败，请检查文件信息')
            }
          })
      }
    },
    // 鼠标移开发票信息金额变化
    costChangeInvAmount(e) {
      let a = Number(e.target.value)
      a = a.toFixed(2)
      if (a == 'NaN') return (this.formInvoice.invAmount = '')
      this.formInvoices.invAmount = this.formInvoice.invAmount
      //获取输入的数据，若不写这行，数据可能输不进去
      this.formInvoice.invAmount = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.formInvoice.invAmount = this.fmoney(this.formInvoice.invAmount)
    },
    // 鼠标移开合同信息金额变化
    costChangeConAmount(e) {
      let a = Number(e.target.value)
      a = a.toFixed(2)
      if (a == 'NaN') return (this.formContract.conAmount = '')
      this.formContracts.conAmount = this.formContract.conAmount
      //获取输入的数据，若不写这行，数据可能输不进去
      this.formContract.conAmount = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.formContract.conAmount = this.fmoney(this.formContract.conAmount)
    },

    // 删除某项合同信息
    async delContract(index, row) {
      let data = await delContract(row[index].id)
      if (data.msg == 'ok') {
        this.$Message.success('删除成功')
        this.getContract()
      }
    },
    // // 合同 获取合同信息列表
    async getContract() {
      let loginState = sessionStorage.getItem('loginState')
      if (!loginState) return
      let { data } = await getContract(this.applyid)
      this.contractData = data
      for (let i = 0; i < data.length; i++) {
        this.contractData[i].number = i + 1
      }

      if (data.length == 0) {
        this.contractData = null
      }
      return data
    },
    //点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = []
    },

    handleChangeFront(file, fileList) {
      this.submitBtns()
      this.fileListFront = fileList[0].raw
    },
    //自定义上传文件
    uploadFileFront(file) {
      this.formData.append('file', file.file)
    },
    // 反面——————————————————————————————————————————————————————————
    handleChangeReverse(file, fileList) {
      this.submitBtns()
      this.fileListReverse = fileList[0].raw
    },
    //自定义上传文件
    uploadFileReverse(file) {
      this.formData.append('file', file.file)
    },
    // 点击上一步
    goLast() {
      this.$router.go(-1)
    },

    // 点击查看示例，查看票就正反面信息
    examineBll() {
      let list = [
        { path: 'http://operate.thunlink.cn/protocol/image/u185.png' },
        { path: 'http://operate.thunlink.cn/protocol/image/u186.png' }
      ]
      let fileUrl = null
      for (let i = 0; i < list.length; i++) {
        fileUrl = list[i].path
        const a = document.createElement('a')
        a.href = fileUrl
        a.target = '_blank'
        a.click()
      }
    },
    // 查看发票详情
    async checkContract(index, row) {
      let id = row[index].id
      let data = await getFilePath(id)
      if (data.code == 100) {
        let fileUrl = data.data[0].path
        const a = document.createElement('a')
        a.href = fileUrl
        a.target = '_blank'
        a.click()
      }
    },
    costChangeB(e) {
      let a = Number(e.target.value)
      a = a.toFixed(2)
      if (a == 'NaN') return (this.form.b = '')
      this.submitBtns()
      this.addform.b = this.form.b
      //获取输入的数据，若不写这行，数据可能输不进去
      this.form.b = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.form.b = this.fmoney(this.form.b)
    },
    // 表单格式转换
    limitInput(value, name) {
      this.addform[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ''
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == '' || s == null || (s == undefined) | isNaN(Number(s))) {
        return s
      }
      s = Number(s) ? Number(s) : s
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2
      s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
      var l = s.split('.')[0].split('').reverse()
      var r = s.split('.')[1]
      var t = ''
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? ',' : '')
      }
      if (n > 0) {
        r = '.' + r
      } else if (n == 0) {
        r = ''
      }
      let returnT = t.split('').reverse().join('') + r
      //负数处理
      if (returnT[0] == '-' && returnT[1] == ',') {
        returnT = '-' + returnT.substring(2)
      }
      return returnT
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = ''
      if (s) {
        str = String(s).replace(/,/g, '')
      }
      if (s && (s + '').indexOf('.') > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, '')
      } else if (s && Number(str)) {
        return str
      } else {
        return s
      }
    },
    // 点击去签署按钮
    async sign() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 1000)
      this.loading = true
      let data = await Contract(this.contract)
      if (data.code == 100) {
        this.loading = false
        this.radio = true
        this.showAgreementVisible = false
        this.hintVisible = true
        this.flowId = data.data.flowId
        this.submitBtns()
      } else {
        // this.$Message.error("签署失败");
        this.loading = false
        this.radio = true
        this.showAgreementVisible = false
        this.hintVisible = true
        this.submitBtns()
      }
    },
    // 签署协议提示确认键
    aaaa() {
      this.radio = true
      this.showAgreementVisible = false
      this.submitBtns()
      this.hintVisible = false
    },
    // 点击勾选协议按钮
    async submitBtn(ruleForm1, ruleForm2, ruleForm3, ruleForm4, ruleForm5, ruleForm6) {
      this.$refs[ruleForm1].validate(valid => {})
      this.$refs[ruleForm2].validate(valid => {})
      this.$refs[ruleForm3].validate(valid => {})
      this.$refs[ruleForm4].validate(valid => {})
      this.$refs[ruleForm5].validate(valid => {})
      this.$refs[ruleForm6].validate(valid => {})
      if (this.radio) return
      let { a, c, d, e, f } = this.form
      let { b } = this.addform
      if (
        a.trim() == '' ||
        b.trim() == '' ||
        c.trim() == '' ||
        d.trim() == '' ||
        e.trim() == '' ||
        f.trim() == '' ||
        this.fileListFront.length == 0 ||
        this.fileListReverse.length == 0
      )
        return this.$Message.error('请上传票面')
      if (this.invoiceData == null) return this.$Message.error('请补充发票信息')
      if (this.contractData == null) return this.$Message.error('请补充合同信息')
      let productcode = this.contract.productcode
      let parameter = {
        productcode: productcode,
        entname: sessionStorage.getItem('entname')
      }
      this.loading = true
      this.showAgreementVisible = true
      let data = await Contracts(parameter)
      if (data.code == 10000) {
        this.$Message.error('登录已过期，请重新登录')
        this.$router.push('/login')
        sessionStorage.clear()
        return
      }
      if (data.code != 100) {
        this.showAgreementVisible = false
        this.$Message.error('系统异常，请您稍后再试')
        this.loading = false
        return
      }
      this.officertel = data.data.ent.fincerttel
      this.operatetel = data.data.ent.operateTel
      this.contract.entname = data.data.ent.entname
      this.contract.FRaccountid = data.data.ent.fraccountid
      this.contract.inputdate = data.data.ent.inputdate
      this.contract.JBRaccountid = data.data.ent.jbRaccountid
      this.contract.licenseno = data.data.ent.licenseno
      this.contract.mainindname = data.data.ent.mainindname
      this.contract.officer = data.data.ent.operatename
      this.contract.officertel = data.data.ent.fincerttel
      this.contract.ORGaccountid = data.data.ent.qyaccountid
      data.data.coopeorg
        ? (this.contract.ticketbank = data.data.coopeorg.ticketbank)
        : (this.contract.ticketbank = '')
      data.data.coopeorg
        ? (this.contract.ticketbankno = data.data.coopeorg.ticketaccountno)
        : (this.contract.ticketbankno = '')
      data.data.coopeorg
        ? (this.contract.tickettel = data.data.coopeorg.tickettel)
        : (this.contract.tickettel = '')
      this.contract.radio = data.data.radio

      let GetcreateContractReview = await createContractReview(this.contract)
      if (GetcreateContractReview.code == 100) {
        this.contractStatuss = GetcreateContractReview.data.statuss
        if (this.contractStatuss) {
          this.list = GetcreateContractReview.data.data
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        } else {
          this.list = GetcreateContractReview.data.data.file
          for (let i = 0; i < this.list.length; i++) {
            if (this.list[i].name == '企业授权协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'first'
            } else if (this.list[i].name == '技术服务协议.pdf') {
              this.list[i].name = this.list[i].name.split('.')[0]
              this.list[i].names = 'second'
            }
          }
          this.loading = false
        }
      } else {
        this.showAgreementVisible = false
        this.$Message.error('系统异常，请您稍后再试')
      }
      this.submitBtns()
    },

    submitBtns() {
      if (
        (this.form.a != '') &
        (this.form.b != '') &
        (this.form.c != '') &
        (this.form.d != '') &
        (this.form.e != '') &
        (this.form.f != '') &
        this.radio &
        (this.fileListFront.length != 0) &
        (this.fileListReverse.length != 0) &
        (this.invoiceData != null) &
        (this.contractData != null)
      ) {
        this.btn = true
      } else {
        this.btn = false
      }
    },
    // 删除
    handleRemove1(file) {
      this.$refs.pictureUpload1.handleRemove(file)
      this.fileListFront = []
      this.submitBtns()
    },
    handleRemove2(file) {
      this.$refs.pictureUpload2.handleRemove(file)
      this.fileListReverse = []
      this.submitBtns()
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    a() {
      this.submitBtns()
    }
  }
}
</script>
<style lang="scss" scoped>
.boxs {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  .bbb {
    font-family: Source Han Sans SC;
    font-size: 0.0885rem;
    font-weight: 400;
    color: #1f1f20;
    margin-right: 0.0417rem;
  }
  .f1 {
    margin-top: 0.1042rem;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 0.2083rem;
        .icon {
          .icon1 {
            width: 0.2083rem;
          }
          .icon2 {
            width: 0.4635rem;
            height: 0.0156rem;
            margin: 0 0.0417rem;
          }
        }
        span {
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          margin-left: -0.099rem;
          margin-top: 0.0156rem;
        }
      }
    }
  }
  .unit {
    z-index: 998;
    position: relative;
    @media only screen and (min-width: 1580px) and (max-width: 1950px) {
      left: 2.2396rem;
      top: 0.3906rem;
    }
    left: 2.2396rem;
    top: 0.2865rem;
    font-size: 0.0833rem;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #b3b3b3;
    font-size: 0.0729rem;
    color: #606266;
  }
  .f2 {
    width: 100%;
    ul {
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      margin-left: 1.0052rem;
      li {
        width: 100%;
        margin-bottom: 0.0938rem;
        height: 0.2604rem;
        display: flex;
        // justify-content: space-between;
        .el-form {
          width: 2.6563rem;
          background-color: #fff;
        }
        .message {
          margin-top: 0.0573rem;
          font-size: 0.0625rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
      }
    }
  }
  // 发票信息
  .f3 {
    box-sizing: border-box;
    padding: 10px 0.1302rem;
    width: 100%;
    margin-top: 0.1823rem;
    // @media only screen and (min-width: 1580px) and (max-width: 1950px) {
    //   height: 520px;
    // }
    .null {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      .newly {
        display: flex;
        position: absolute;
        left: 0.0417rem;
        width: 0.7292rem;
        h4 {
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          margin-right: 0.0417rem;
          cursor: pointer;
        }
        h5 {
          width: 0.2396rem;
          height: 0.1042rem;
          background: #3f6ef2;
          border-radius: 0.0104rem;
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          cursor: pointer;
        }
      }
      img {
        width: 1.3542rem;
      }
      p {
        font-size: 0.0833rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #b3b3b3;
      }
    }
    .notNull {
      width: 100%;
      // 新增按钮
      .newly {
        display: flex;
        align-items: center;
        width: 0.7292rem;
        margin: 0.1563rem 0.0052rem;
        h4 {
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          margin-right: 0.0417rem;
          cursor: pointer;
        }
        h5 {
          box-sizing: border-box;
          padding: 0 0.026rem;
          background: #3f6ef2;
          border-radius: 0.0104rem;
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          margin-left: 0.026rem;
          margin-top: 0.0052rem;
          cursor: pointer;
        }
      }
      // 说明文字
      .explain {
        display: flex;
        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #b1b1b1;
        margin: 0.1302rem 0;
        p {
          margin-bottom: 0.0313rem;
        }
      }
      // 表格编辑/查看
      .span {
        display: inline-block;

        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #3f6ef2;
        border-bottom: 0.0052rem solid #3f6ef2;
        cursor: pointer;
        margin-right: 0.026rem;
      }
      .disable {
        color: #aaa;
        border-bottom: 0.0052rem solid #aaa;
      }
      // 删除按钮样式
      .del {
        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ff6060;
        border-bottom: 0.0052rem solid #ff6060;
      }
      // 服务协议
      .agreement {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 0.1302rem;
        text-align: center;
        margin-top: 0.2083rem;
        user-select: none;
        span {
          font-size: 0.0729rem;
          color: #666;
          margin-left: 0.0365rem;
        }
        img {
          width: 15px;
          height: 15px;
          cursor: pointer;
        }
        a {
          font-size: 14px;
          color: #3f6ef2;
        }
      }
      // 按钮组
      .submit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 0.2604rem;
        margin: 0.4688rem 0 0.3125rem 0;
        cursor: pointer;
        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 0.9375rem;
          height: 0.1771rem;
          background: #63c3dd;
          border-radius: 0.0208rem;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          margin-right: 0.1563rem;
        }
        .btn1 {
          background-color: #bfbfbf;
        }
        // 提交按钮
        .btn3 {
          background-color: #ccc;
          &.active {
            background-color: #3f6ef2;
          }
          &.actives {
            background-color: rgba(10, 123, 224, 0.6);
          }
        }
      }
    }
  }

  // 按钮组
  .submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 0.2604rem;
    margin-top: 0.0781rem;
    cursor: pointer;
    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 0.9375rem;
      height: 0.1771rem;
      background: #63c3dd;
      border-radius: 0.0208rem;
      font-size: 0.0938rem;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #ffffff;
      margin-right: 0.1563rem;
    }
    .btn1 {
      background-color: #bfbfbf;
    }
    // 提交按钮
    .btn3 {
      background-color: #ccc;
      &.active {
        background-color: #3f6ef2;
      }
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
      }
    }
  }
  .license {
    display: flex;
    justify-content: center;
    margin-bottom: 0.1042rem;

    .permit {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 1.1458rem;
      height: 0.7292rem;
      margin-right: 0.1042rem;
      overflow: hidden;
      cursor: pointer;
    }
    .permit-front {
      background: url(@/assets/shangpiao/组70.png) no-repeat;
      background-size: 100% 100%;
    }
    .permit-reverse {
      background: url(@/assets/shangpiao/组71.png) no-repeat;
      background-size: 100% 100%;
    }
    .card {
      height: 0.6406rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .license-right {
      display: flex;
      flex-direction: column;
      div {
        width: 100%;
        .examine {
          margin-bottom: 0.0521rem;
          height: 0.1042rem;
          color: #738bd0;
          text-decoration: underline;
          cursor: pointer;
        }
        p {
          font-size: 0.0885rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999999;
          line-height: 0.125rem;
          margin-bottom: 0.0156rem;
        }
      }
    }
  }
  // 服务协议
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 0.1302rem;
    text-align: center;
    margin-top: 0.0781rem;
    user-select: none;
    span {
      font-size: 0.0729rem;
      color: #666;
      margin-left: 0.0365rem;
    }
    img {
      width: 15px;
      height: 15px;
      cursor: pointer;
    }
    a {
      cursor: pointer;
      font-size: 0.0729rem;
      color: #3f6ef2;
    }
  }
  // 弹出框
  .dialog-centers {
    margin: 0 auto;
    width: 90%;
  }
  // 弹出框
  .dialog-center {
    box-sizing: border-box;
    padding: 0 0.026rem;
    display: flex;
    justify-content: center;
    width: 100%;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      height: 3.05rem;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      height: 2.8rem;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      height: 3.4375rem;
    }
    .first {
      display: flex;
      justify-content: center;
      align-items: center;
      // 小屏
      @media only screen and (min-width: 900px) and (max-width: 1535px) {
        min-width: 3.125rem;
        height: 2.3958rem;
      }
      // 中屏
      @media only screen and (min-width: 1536px) and (max-width: 1919px) {
        width: 3.125rem;
        height: 2.3958rem;
      }
      // 大屏
      @media only screen and (min-width: 1920px) and (max-width: 2580px) {
        width: 3.9583rem;
        height: 3.0208rem;
      }

      background-color: #fff;

      h1 {
        font-size: 0.0938rem;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 4px;
      background-color: #fff;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
        border: 0px;
      }
    }
  }
  .abc {
    width: 368px;
    .el-select {
      width: 100%;
    }
  }
  .dialog-center-hint {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    font-size: 0.0885rem;
  }
  //合同信息，发票信息弹框
  // 弹出框
  .dialog-centerss {
    display: flex;
    justify-content: center;
    width: 90%;
    margin: 0 auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    z-index: 998;
    .dialog-footer-bnt {
      width: 121px;
      height: 31px;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 4px;
      background-color: #fff;
      z-index: 998;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
      z-index: 998;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
        border: 0.0052rem solid rgba(10, 123, 224, 0.6);
      }
    }
  }
  .el-form-item {
    margin-bottom: 10px;
    height: 45px;
    .file {
      font-size: 14px;
      margin-right: 10px;
      color: #3f6ef2;
      text-decoration: underline;
      cursor: pointer;
      z-index: 998;
    }
    .file1 {
      color: #999;
    }
  }
}
::v-deep .hint .el-dialog {
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 52%;
  }
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 50%;
  }
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 49%;
  }
}
::v-deep .hint .el-dialog__body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 20px;
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 45%;
    // background-color: #f0f;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 45%;
    // background-color: #ff0;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 50%;
    // background-color: #f00;
  }
}
// 发票，合同信息
::v-deep .success .el-dialog {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 37%;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 35%;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 27%;
  }
}
::v-deep .el-dialog__header {
  padding: 5px 20px;
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 1.5625rem;
  height: 0.2031rem;
  font-size: 0.0833rem;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 0.0521rem;
  color: #606266;
  outline: 0;
  line-height: 0.1823rem !important;
}
::v-deep .el-form-item__label {
  font-size: 0.0885rem;
  font-weight: 400;
  color: #1f1f20;
}
::v-deep .success .el-form-item__label {
  font-size: 0.0677rem;
  font-weight: 400;
  color: #1f1f20;
}
::v-deep .success .el-dialog__header {
  border-bottom: 1px solid #e7e7e7;
  padding: 0.0781rem 0.1042rem;
}
::v-deep .success .el-dialog--center {
  text-align: left;
}
::v-deep .success .el-dialog__title {
  font-size: 0.0885rem;
  color: #333333;
}
::v-deep .el-input__prefix {
  left: 1.3802rem;
}
::v-deep .el-upload-list__item-name {
  width: 1.0417rem;
}
::v-deep .aaaaa .el-icon-date:before {
  content: '';
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 1.5104rem;
  height: 0.8854rem;
  display: flex;
  margin: 0;
  z-index: 888;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 1.5104rem;
  height: 0.8854rem;
}
</style>
<style lang="scss">
.el-popover {
  min-width: 100px !important;
}
// /* 表格 */
// .el-table {
//   th.el-table__cell > .cell {
//     font-size: 16px;
//     font-weight: 400;
//   }
//   .cell {
//     font-size: 16px;
//   }
// }
// .el-upload-list {
//   width: 230px;
// }

// 上传
// 上传
.el-upload--picture-card {
  background-color: rgba(245, 245, 245, 0.1);
  border: 0;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 100%;
  height: 160px;
  display: flex;
  margin: 0;
  z-index: 888;
}
.el-upload--picture-card {
  line-height: 0;
}
</style>
